<template>
    <el-container class="layout-container-demo">
        <Asidebar />
        <el-container>
            <Header></Header>
            <el-main>
                <!-- 标签页 -->
                <el-tabs v-model="currentActiveTab" @tab-click="handleTabClick" type="card" closable
                    @tab-remove="handleTabRemove">
                    <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.title" :name="tab.name">
                        <!-- 嵌套路由 -->
                        <router-view v-if="activeTab === tab.name" />
                    </el-tab-pane>
                </el-tabs>
            </el-main>
            <el-footer>
                <Footer></Footer>
                <!-- <el-text class="mx-1" type="info">Copyright &copy; 2024-2026  乐码君 版权所有</el-text> -->
            </el-footer>
        </el-container>
    </el-container>

</template>

<script setup>
import Asidebar from '@/components/Asidebar.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

import { ref, computed, watch, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTabsStore } from '@/stores/tabs.js'

//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
//本页面中:当前激活的标签页
const currentActiveTab = ref(tabsStore.activeTab)

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log("================ activeTab: ", activeTab.value)

//tabs是要发生变化的，当关闭时，它的元素会删除
const tabs = computed(() => tabsStore.tabs)

const handleTabClick = (tab) => {
    console.log(">>> 点击了标签：", tab.props.label, "对象:", tab)
    //修改tabsStore中的activeTab
    tabsStore.setActiveTab(tab.props.name)
    //编程式路由
    router.push({ name: tab.props.name })
}

const handleTabRemove = (tabName) => {
    console.log("点击了删除标签按钮: ", tabName)
    tabsStore.closeTab(tabName)
}

// Watch for changes in tabs and activeTab to persist them
watch(tabs, (newTabs) => {
    console.log("watch tabs: ", newTabs)
    localStorage.setItem('tabs', JSON.stringify(newTabs))
}, { deep: true })

watch(activeTab, (newActiveTab) => {
    console.log("watch activeTab: ", newActiveTab)
    localStorage.setItem('activeTab', newActiveTab)
    //修改currentActiveTab值
    currentActiveTab.value = newActiveTab
})
// 页面加载时恢复状态
onMounted(() => {
    const savedTabs = JSON.parse(localStorage.getItem('tabs'))
    console.log('已保存的tabs: ', savedTabs)
    const savedActiveTab = localStorage.getItem('activeTab')
    console.log('已保存的activeTab: ', savedActiveTab)

    // 恢复isCollapse
    // isCollapse.value = localStorage.getItem('isCollapse') === 'true'

    // 恢复tabs
    if (savedTabs) {
        savedTabs.forEach(tab => {
            tabsStore.addTab(tab)
        })
    }

    // 恢复activeTab
    if (savedActiveTab) {
        tabsStore.setActiveTab(savedActiveTab)
        // 更新本地的currentActiveTab
        currentActiveTab.value = savedActiveTab
        // 更新路由
        router.push({ name: savedActiveTab })
    }

})

</script>
<style lang="less" scoped>
.el-container {
    height: 100vh;
}

.el-main {
    padding: 20px 0 20px 20px;
}

/* 自定义激活标签背景颜色 */
:deep(.el-tabs__item.is-active) {
    background-color: var(--el-color-primary) !important;
    color: #fff !important;
}
</style>